<template>
  <div class="good-info">
    <!--店铺名称-->
    <div class="shop-name" v-if="false">
      <img class="icon" src="@/assets/images/public/taobao.png" />
      <span class="name">小北温州烘培diy</span>
      <router-link to="/shop/details" class="btn">进入店铺</router-link>
    </div>
    <!--商品信息-->
    <div class="title">
      <div class="title-left">
        <div class="text">
          <t-platform class="type" :type="info.channel"></t-platform>
          {{ info.subject }}
        </div>
        <div class="fun-wrap">
          <div class="fun" @click="directLink">
            <img class="icon" src="@/assets/images/public/link-icon.png" alt="" />
            <span class="fun-text">{{ $t("goods.directLink") }}</span>
          </div>
          <div class="fun" @click="onCopy">
            <img class="icon" src="@/assets/images/public/copy-icon.png" alt="" />
            <span class="fun-text">{{ $t("goods.copyLink") }}</span>
          </div>
          <div class="fun" @click="refreshPage">
            <img class="icon" src="@/assets/images/public/update-blue.png" alt="" />
            <span class="fun-text fun-blue">{{ $t("goods.forcedRefresh") }}</span>
          </div>
        </div>
      </div>
      <div class="volume" v-if="info.monthSold">
        <span class="num">{{ info.monthSold }}</span>
        <Tooltip placement="top-start" max-width="300">
          <div class="price" slot="content">
            <div class="price-value" style="font-size: 12px">
              {{ $t("goods.dayHint") }}
            </div>
          </div>
          <div class="tooltip-text">
            <span>{{ $t("goods.monthlySales") }}</span>
            <img class="icon" src="@/assets/images/public/help-icon.png" alt="" />
          </div>
        </Tooltip>
      </div>
    </div>
    <!--售价-->
    <div class="price-top" v-if="isSpuLock == 0">
      <!-- 原价 -->
      <div class="top-original" v-if="info.priceMode">
        <div class="original-text">{{ $t('goods.originalPrice') }}</div>
        <div class="original-price">
          <span v-if="userCurrency !== 'CNY'">CNY</span>
          <span v-if="userCurrency !== 'CNY'" class="price-num">{{ getDisposePrice('originalPriceCNY') }}</span>
          <span v-if="userCurrency !== 'CNY'" class="price-y">≈</span>
          <span>{{ userCurrency }}</span>
          <span class="price-num">{{ getDisposePrice('originalPrice') }}</span>
          <div class="price-line"></div>
        </div>
      </div>
      <div class="price-wrap">
        <span class="price" v-if="currentSelectInfo.price && afterPrice == ''">
          CNY
          <span class="big-text">
            {{ currentSelectInfo.priceCNY ? currentSelectInfo.priceCNY : currentSelectInfo.price }}
          </span>
          <span v-if="userCurrency !== 'CNY'">
            ≈
            {{ userCurrency }}
            <span class="big-text">{{ currentSelectInfo.price }}</span>
          </span>
        </span>
        <span class="price" v-else-if="afterPrice">CNY {{ afterPrice }}</span>
        <span class="price" v-else-if="info.price">
          CNY
          <span class="big-text">{{ info.priceCNY ? info.priceCNY : info.price }}</span>
          <span v-if="userCurrency !== 'CNY'">
            ≈
            {{ userCurrency }}
            <span class="big-text">{{ info.price }}</span>
          </span>
        </span>
        <span class="price" v-else-if="info.saleInfo">
          CNY
          <template v-if="
            info.saleInfo.priceRangeList &&
            info.saleInfo.priceRangeList.length > 0
          ">
            <span class="big-text">
              {{ info.saleInfo.priceRangeList[0].priceCNY ? info.saleInfo.priceRangeList[0].priceCNY
                : info.saleInfo.priceRangeList[0].price }}
            </span>
            <span v-if="userCurrency !== 'CNY'">
              ≈
              {{ userCurrency }}
              <span class="big-text">{{ info.saleInfo.priceRangeList[0].price }}</span>
            </span>
          </template>
          <template v-else>
            {{
              info.saleInfo.priceRanges && info.saleInfo.priceRanges.length > 0 && info.saleInfo.priceRanges[0].priceCNY
                ? info.saleInfo.priceRanges[0].priceCNY
                : ""
            }}
            <span v-if="userCurrency !== 'CNY'">≈ {{ userCurrency }}{{
              info.saleInfo.priceRanges &&
                info.saleInfo.priceRanges.length > 0
                ? info.saleInfo.priceRanges[0].price
                : "" }}</span>
          </template>
        </span>
        <!-- 改价编辑 -->
        <!-- <div class="edit" @click="editBtn()">
          <Icon type="ios-create-outline" size="18" color="#333333" />
          <span>{{ $t('user.change') }}</span>
        </div> -->
        <!-- 立减 -->
        <div class="price-save" v-if="info.priceMode">
          <Icon type="ios-checkmark-circle" color="#32CB9D" size="19" />
          <span class="save-text">{{ $t('goods.goodsSave') }} {{ info.priceMode == 'percent' ?
            `${bigTimes(Number(info.discount), 100)}%` : `CNY${info.discount || 0}` }}</span>
        </div>
      </div>
    </div>
    <div class="spu-lock-price" v-else>
      CNY <span>???</span>
    </div>
    <div class="return-tips" v-if="info.sevenDaysRefunds == true">{{ $t("user.exchange_tips") }}</div>
    <div class="pay-text">
      {{ $t("goods.paymentPurchasing") }}
    </div>
    <div class="logistics-info">
      <div class="logistics-item">
        <img class="sept-icon" src="@/assets/images/public/one.png" alt="" />
        <div class="left top-left">
          <div class="left-content-wrap">
            <div class="left-content">
              <span class="text">{{ $t("goods.merchant") }}</span>
              <img class="icon" src="@/assets/images/public/arrow-right.png" alt="" />
              <span class="text">{{
                $t("goods.warehouseFreight", { appName: appName })
              }}</span>
              <i18n path="goods.actualShippingSubjectOrderConfirmation" class="input-amount">
                <span class="text" slot="text">{{
                  $t("goods.shippingFee")
                }}</span>
                <Input v-model="freightFee" class="free" readonly slot="fee" size="small" placeholder="" />
              </i18n>
            </div>
          </div>
          <div class="left-text-wrap">
            <span class="hint-text">{{
              $t("goods.actualShippingConfirmationPage")
            }}</span>
          </div>
        </div>
      </div>
      <div class="logistics-line"></div>
      <div class="logistics-item">
        <img class="sept-icon" src="@/assets/images/public/two.png" alt="" />
        <div class="left">
          <span class="text">{{
            $t("goods.stash", { appName: appName })
          }}</span>
          <img class="icon" src="@/assets/images/public/arrow-right.png" alt="" />
          <span class="text">{{ $t("goods.address") }}</span>
          <router-link to="/estimation" class="estimate">{{
            $t("goods.estimatedInternationalFreight")
          }}</router-link>
        </div>
      </div>
      <Badge :text="$t('estimation.limited_text')" :offset="[16, -8]">
        <span class="tips-img">{{ $t('goods.detail_tips') }}</span>
      </Badge>
    </div>
    <!--选择商品尺寸/类型-->
    <div class="select-type">
      <black-commodity-specification @on-change="onSelect" :info="info"></black-commodity-specification>

      <div class="type-item order-num">
        <div class="type-label">{{ $t("goods.quantity") }}: </div>
        <div class="left">
          <div class="left-content">
            <InputNumber :min="info.startQuantity" v-model="form.quantity" size="large" controls-outside></InputNumber>
            <span class="amount-sale" v-if="currentSelectInfo">{{ $t("goods.inventory") }}({{ currentSelectInfo.stock
              }})</span>
          </div>
          <span class="min-quantity" v-if="info.startQuantity">{{ $t("goods.minimumQuantity") }}：{{ info.startQuantity
            }}</span>
        </div>
      </div>
      <!-- 留言 -->
      <div class="type-item">
        <span class="type-label">{{ $t("goods.leaveMessage") }}: </span>
        <div class="list-sty">
          <Input class="textarea" v-model="form.remarks" type="textarea" show-word-limit maxlength="1000" :rows="4"
            :placeholder="$t('goods.messagesProcurement')" :autosize="{ maxRows: 4, minRows: 4 }" />
          <img src="@/assets/images/public/gap_icon.png" class="gap-icon" alt="">
          <Upload :show-upload-list="false" :headers="{
            'X-Access-Token': userToken,
            'lang': 'en_US'
          }" biz="chat" :data="{
            biz: 'custom'
          }" name="file" :disabled="uploadLoading" :max-size="3072" :before-upload="handleBeforeUpload"
            :on-success="onSuccess" :on-exceeded-size="handleMaxSize" :action="uploadURL">
            <div class="loading-wrap" v-if="uploadLoading">
              <t-loading></t-loading>
            </div>
            <div v-if="urlImage != ''" class="preview-img">
              <img class="upload-image" :src="urlImage" alt="" />
              <img src="@/assets/images/public/delete.png" class="delete-icon" @click="removeMet($event)" alt="">
              <div class="overlay"></div>
            </div>
            <div v-if="!urlImage & !uploadLoading" class="upload-sty">
              <img src="@/assets/images/public/upload_img.png" class="upload-img" alt="">
              <div class="bot-text">{{ $t('custom.pic_tip') }}</div>
            </div>
          </Upload>
        </div>
      </div>
      <!-- 定制服务 -->
      <custom-service ref="customRef" @parentSendData="parentSendData" @parentVidData="parentVidData"
        :isShowVideo="info"></custom-service>
    </div>

    <div class="buy-tips buy-help">
      {{ $t("goods.strictlyFollow", { appName: appName }) }}
    </div>

    <div class="div-line"></div>
    <div class="buy-tips tips-text">
      <Icon type="ios-alert" color="#FF186B" size="20" />
      <div class="text-sub">
        {{ $t("goods.platform", { appName: appName }) }}
      </div>
    </div>

    <div class="flow"></div>
    <Checkbox v-model="single">
      <span class="agree">{{ $t("goods.agree") }}</span>
    </Checkbox>

    <div class="buy">
      <span v-if="isSpuLock === 0" class="add-btn" @click="onCartAdd">
        {{ $t("goods.addCart") }}
      </span>
      <span v-else class="un-add-btn">
        <img src="@/assets/images/activity/blackFriday/icon.png" class="icon" alt="">
        {{ $t("goods.addCart") }}
      </span>
    </div>
    <notice ref="notice" />
  </div>
</template>

<script>
import { doubleCartAdd } from "@/api/activity";
import TLoading from "@/components/t-loading";
import CommSize from "@/views/main/goods/goods-details/components/comm-size";
import CommImage from "@/views/main/goods/goods-details/components/comm-image";
import { cartAdd, cartBalanceAccounts } from "@/api/cart";
import { orderCreate } from "@/api/order";
import { commonUpload } from "@/api/sys";
import { mapState } from "vuex";
import TPlatform from "@/components/t-platform";
import { debounce, fromSeoFriendsChannel } from "@/common/common";
import { bigTimes } from "@/common/digital-computation";
import notice from "@/components/t-noticeModal";
import CustomService from '@/views/main/goods/goods-details/components/custom-service.vue';
import BlackCommoditySpecification from './black-commodity-specification.vue';
export default {
  name: "good-info",
  components: { TPlatform, CommImage, CommSize, notice, TLoading, CustomService, BlackCommoditySpecification },
  props: {
    info: Object,
    isSpuLock: Number
  },
  data() {
    return {
      bigTimes,
      buyLoading: false,
      addLoading: false,
      currentSelectInfo: {
        price: 0,
        priceCNY: 0,
        image: '',
        originalPriceCNY: 0,
        originalPrice: 0
      },
      setFreightPrice: false,
      single: true,
      appName: process.env.VUE_APP_NAME,
      form: {
        channel: this.info.channel, // 商品来源渠道：TAOBAO-淘宝，1688-阿里巴巴，JD-京东，PDD-拼多多，DOUYIN-抖音，100buy-平台上架，MERCH-商户
        expressFee: this.info.expressFee, // 国内运费
        quantity: this.info.startQuantity < 1 ? 1 : this.info.startQuantity, // 商品数量(计算金额用)，必填
        skuNo: "", //  系统商品编号/货号：系统唯一
        spuNo: this.info.spuNo, // SPU产品编号
        remarks: "",
        manuaAdjustRemark: '',
        manuaPrice: '',
        manuaAdjustImage: '',
        notSupportQcVideos: Boolean,
        source: 3,
      },
      remarks: "", // 备注
      userToken: localStorage.getItem("USER_TOKEN"),
      uploadURL: commonUpload(),
      uploadLoading: false,
      imageList: '',
      urlImage: '',
      idValue: Number,
      channelValue: Number,
      afterPrice: '',
      freightFee: '',
    };
  },
  computed: {
    ...mapState({
      config: (state) => state.config.config,
      userCurrency: (state) => {
        return state.user.userCurrency.code;
      },
      userInfo: (state) => {
        //  ENABLE 老用户，DISABLE 新用户
        return state.user.userInfo.orderFlag == 'DISABLE';
      },
    }),
  },
  mounted() {
    if (this.$route.params.spuNo) {
      this.idValue = this.$route.params.spuNo;
      this.channelValue = fromSeoFriendsChannel(this.$route.params.channel);
      return;
    } else if (this.$route.query.id) {
      this.idValue = this.$route.query.id;
      this.channelValue = this.$route.query.channel;
    }
  },
  created() {
    if (this.info.expressFee) {
      this.freightFee = this.info.expressFee;
    } else {
      this.freightFee = this.$t("goods.free");
    }
    if (this.info.notSupportQcVideos) {
      this.form.notSupportQcVideos = this.info.notSupportQcVideos;
    }
  },
  methods: {
    // 定制照片数据
    parentSendData(info) {
      // 去掉空值数据
      // const filteredData = info.filter(item => {
      //   return Object.values(item).every(value => value !== '' && value !== null);
      // });
      const filteredData = info.filter(item => {
        return item.serviceRemark !== '' && item.serviceRemark !== null ||
          item.imageUrl !== '' && item.imageUrl !== null;
      });
      this.form.services = filteredData;
    },
    // 定制视频数据
    parentVidData(info) {
      // 去掉空值数据
      const newArray = info.map(item => ({
        videoType: item.videoType,
        serviceType: 2
      }));
      this.form.videoServices = newArray;
    },
    getDisposePrice(type) {
      let val = this.currentSelectInfo[type] ? this.currentSelectInfo[type] :
        this.info[type] ? this.info[type] :
          this.info.saleInfo.priceRangeList && this.info.saleInfo.priceRangeList.length > 0 ?
            this.info.saleInfo.priceRangeList[0][type] :
            info.saleInfo.priceRanges && info.saleInfo.priceRanges.length > 0 ?
              info.saleInfo.priceRanges[0][type] : 0;
      return val || 0;
    },
    handleMaxSize(file) {
      this.uploadLoading = false;
      this.$Message.error(`File ${file.name} is too large, no more than 3M.`);
    },
    onSuccess(response) {
      // 上传成功
      this.uploadLoading = false;
      if (response.code == 0 || response.code == 200 || response.code == 201) {
        let data = response.result;
        this.urlImage = data.url;
        this.imageList = data.url;
      } else {
        this.$Message.error(response.message);
      }
    },
    onError(error, file) {
      this.$Message.error(this.$t('user.uploadFailure'));
    },
    handleBeforeUpload(file) {
      this.uploadLoading = true;
    },
    removeMet(event) {
      event.stopPropagation();
      // 删除图片
      this.imageList = '';
      this.urlImage = '';
    },
    onCopy() {
      this.$emit('copyLink')
    },
    directLink() {
      // 打开外部链接
      window.open(this.info.detailUrl);
    },
    refreshPage() {
      this.$emit('refreshData', 1);
    },
    onSelect(info) {
      // 选择商品规格
      this.currentSelectInfo = info;
      this.form.skuNo = info.skuNo;
      this.form.channel = info.channel
      this.$emit("on-change", info);
    },
    onCartAdd: debounce(function () {
      this.form.imageRemarks = this.imageList;//定制化要求
      this.form.channel = this.info.channel;
      this.form.spuNo = this.info.spuNo;
      this.form.expressFee = this.info.expressFee;//国内运费
      this.form.notSupportQcVideos = this.info.notSupportQcVideos;//是否支持定制QC视频

      if (this.info.skuVoList && this.info.skuVoList.length > 0) {
        if ((this.info.skuVoList.length == 1 && !this.info.skuVoList[0]['skuAttr']) || (this.info.skuVoList.length == 1 && this.info.skuVoList[0]['skuAttr'].length == 0)) { // 特殊处理淘宝只有一个规格情况
          this.form.skuNo = this.info.skuVoList[0]['skuNo']
        } else if (!this.form.skuNo) {
          this.$Message.error(this.$t("goods.selectSpecifications"));
          return false;
        }
      }

      if (!this.single) {
        this.$Message.error(
          this.$t("goods.platform", { appName: this.appName })
        );
        return false;
      }
      doubleCartAdd(this.form).then((res) => {
        if (res.code == 200) {
          this.$store.commit("setDoubleCartNum", res.result.cartSize);
          this.$Message.success(this.$t("goods.addSuccess"));
          this.$emit("addSuccess"); //加购成功，父组件刷新购物车数量
        }
      });
    })
  },
};
</script>

<style scoped lang="less">
/deep/.ivu-input:hover {
  border-color: #FF186B;
}

/deep/.ivu-input:focus {
  border-color: #FF186B;
}

/deep/.ivu-checkbox-checked .ivu-checkbox-inner {
  background-color: #FF186B;
  border-color: #FF186B;
}

.good-info {
  overflow: hidden;

  .shop-name {
    display: flex;
    align-items: center;

    .icon {
      display: block;
      width: 20px;
    }

    .name {
      margin-left: 8px;
      color: @t-label-color;
      font-size: 16px;
      font-weight: 500;
    }

    .btn {
      padding: 2px 12px;
      margin-left: 16px;
      background: @primary-color;
      border-radius: 2px 2px 2px 2px;
      color: #ffffff;
      font-size: 12px;
    }
  }

  .title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    //margin-top: 24px;
    .title-left {
      flex: 1;
      display: flex;
      justify-content: space-between;

      .text {
        display: block;
        width: 70%;
        font-family: PingFang HK, PingFang HK;
        font-weight: 500;
        font-size: 27px;
        color: #1E1714;
        line-height: 30px;
        word-wrap: break-word;

        .type {
          display: inline-block;
          vertical-align: top;
        }
      }

      .fun-wrap {
        display: flex;
        align-items: center;
        width: auto;
        // margin-top: 6px;
        height: 30px;

        .fun {
          display: flex;
          align-items: center;
          gap: 4px;
          margin-left: 12px;
          cursor: pointer;

          .icon {
            color: #FF186B;
            flex: 0 0 14px;
            display: block;
            width: 15px;
            height: 15px;
          }

          .fun-text {
            margin-left: 4px;
            color: #FF186B;
            font-size: 18px;
            font-weight: 500;
            line-height: 18px;
          }

          .fun-blue {
            color: #3370FF !important;
          }
        }
      }
    }

    .volume {
      text-align: center;
      padding-left: 16px;
      border-left: 1px solid #ececec;

      .num {
        display: block;
        color: @t-title-color;
        font-size: 18px;
        line-height: 18px;
        font-weight: 900;
      }

      .tooltip-text {
        display: flex;
        align-items: center;
        cursor: pointer;

        span {
          color: #999999;
          font-weight: 500;
          font-size: 12px;
          line-height: 12px;
        }

        .icon {
          display: block;
          margin-left: 2px;
          width: 12px;
        }
      }
    }
  }

  .return-tips {
    display: inline-block;
    padding: 5px 15px 7px 14px;
    background: #FFEAF0;
    border-radius: 45px 45px 45px 45px;
    border: 1px solid #FF186B;
    margin-top: 12px;
    font-family: PingFang HK, PingFang HK;
    font-weight: 400;
    font-size: 16px;
    color: #FF186B;
    line-height: 19px;
  }

  .spu-lock-price {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 28px;
    color: #FF186B;
    line-height: 33px;
    margin-top: 32px;

    .span {
      font-size: 48px;
    }
  }

  .price-top {
    margin-top: 32px;

    .top-original {
      display: flex;
      align-items: flex-end;
      color: #AEB0B9;
      font-weight: bold;
      font-size: 20px;
      line-height: 20px;
      margin-bottom: 16px;

      .original-price {
        margin-left: 14px;
        position: relative;

        .price-num {
          font-size: 32px;
          line-height: 24px;
          margin-left: 10px;
        }

        .price-y {
          margin: 0 10px;
        }

        .price-line {
          width: 100%;
          height: 2px;
          background: #AEB0B9;
          position: absolute;
          top: 0;
          bottom: 0;
          margin: auto;
        }
      }

      .original-l {
        text-decoration: line-through;
      }
    }
  }

  .price-wrap {
    display: flex;
    align-items: center;

    .price-save {
      margin-left: 20px;

      .save-text {
        font-family: Inter, Inter;
        font-weight: 500;
        font-size: 20px;
        color: #1E1714;
        line-height: 23px;
        margin-left: 10px;
      }
    }

    .price {
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 28px;
      color: #FF186B;
      line-height: 33px;

      .big-text {
        font-size: 48px;
      }
    }

    .edit {
      display: flex;
      align-items: center;
      margin-left: 23px;
      cursor: pointer;

      span {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 18px;
        color: #333333;
        line-height: 21px;
      }
    }
  }

  .logistics-info {
    position: relative;
    margin-top: 24px;
    margin-bottom: 24px;
    padding: 24px;
    background: #f5f5f5;
    border-radius: 10px;

    .logistics-item {
      display: flex;
      align-items: center;

      .sept-icon {
        display: block;
        width: 24px;
      }

      .left {
        flex: 1;
        display: flex;
        align-items: center;
        margin-left: 8px;

        .left-content-wrap {
          display: inline-block;

          .left-content {
            display: flex;
            align-items: center;
          }
        }

        .left-text-wrap {
          display: inline;
          position: relative;
          height: 24px;

          .hint-text {
            top: 2px;
            left: 0;
            right: 0;
            color: @t-title-color;
            font-size: 14px;
            font-weight: 500;
          }
        }

        .text {
          color: @t-title-color;
          font-size: 14px;
          font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
          font-weight: 500;
        }

        .icon {
          display: block;
          width: 16px;
          margin: 0 4px;
        }

        .estimate {
          cursor: pointer;
          color: #FF186B;
          margin-top: 2px;
        }

        .input-amount {
          display: flex;
          align-items: center;
          color: @t-title-color;
          font-size: 14px;
          font-weight: 500;

          .text {
            white-space: nowrap;
          }

          .free {
            display: block;
            width: 48px;
            height: 24px;
            margin: 0 4px;
            text-align: center;
            line-height: 24px;
            background: #ffffff;
            border-radius: 2px 2px 2px 2px;
            opacity: 1;
            color: @t-title-color;
            font-size: 12px;
            font-weight: 500;

            :deep(.ivu-input) {
              width: 48px;
              height: 24px;
            }
          }

          .input {
            display: block;
            width: 48px;
            height: 24px;
            margin: 0 4px;
            text-align: center;
            background: #ffffff;
            border-radius: 2px 2px 2px 2px;
            color: @t-title-color;
            font-size: 12px;
            border: none;

            &:focus {
              outline: 1px solid @primary-color;
            }

            &:hover {
              border: 1px solid @primary-color;
            }
          }
        }
      }

      .top-left {
        display: block;
        position: absolute;
        left: 48px;
        top: 24px;
      }
    }

    .tips-img {
      display: inline-block;
      padding: 5px;
      background-color: #FF186B;
      border-radius: 3px;
      margin-left: 4px;
      color: #ffffff;
      margin-top: 24px;
    }

    .logistics-line {
      width: 1px;
      height: 32px;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      background: #FF186B;
      margin: 6px 0;
      margin-left: 12px;
    }
  }

  .comm-size {
    .label {
      display: block;
      margin-right: 6px;
      margin-bottom: 6px;
      color: @t-title-color;
      font-size: 14px;
      font-weight: 500;

      .value {
        color: #FF186B;
      }
    }

    .size-list {
      display: block;
      overflow: hidden;

      .size-item {
        float: left;
        padding: 4px 12px;
        background: #ffffff;
        border-radius: 2px 2px 2px 2px;
        opacity: 1;
        border: 1px solid #dcdee2;
        cursor: pointer;
        color: @t-title-color;
        font-size: 14px;
        font-weight: 400;
        margin-right: 10px;
        margin-bottom: 10px;
      }

      .image-item {
        float: left;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        border-radius: 2px 2px 2px 2px;
        opacity: 1;
        border: 1px solid #dcdee2;
        overflow: hidden;
        margin-right: 10px;
        margin-bottom: 10px;
        cursor: pointer;

        img {
          width: 100%;
        }
      }

      .active {
        border: 1px solid @primary-color;
        color: @primary-color;
      }
    }
  }

  .select-type {
    .type-item {
      margin-top: 24px;

      .type-label {
        display: block;
        margin-right: 6px;
        margin-bottom: 6px;
        color: @t-title-color;
        font-size: 19px;
        font-weight: 600;
      }

      .list-sty {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-top: 16px;
        margin-bottom: 24px;

        .gap-icon {
          width: 34px;
          height: 34px;
        }


        .preview-img {
          position: relative;

          .upload-image {
            width: 160px;
            height: 150px;
            border-radius: 11px 11px 11px 11px;
          }

          .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 160px;
            height: 150px;
            background-color: transparent;
            display: none;
          }

          .delete-icon {
            display: none;
          }
        }

        .preview-img:hover>.overlay {
          display: block;
          border-radius: 11px;
          background-color: rgba(0, 0, 0, 0.5);
        }

        .preview-img:hover>.delete-icon {
          display: block;
          width: 60px;
          height: 60px;
          position: absolute;
          top: 50px;
          left: 50px;
          z-index: 2;
          cursor: pointer;
        }

        .upload-sty {
          width: 160px;
          height: 150px;
          border-radius: 11px 11px 11px 11px;
          border: 1px dashed #CACACA;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          position: relative;

          .upload-img {
            width: 60px;
            height: 60px;
          }

          .bot-text {
            font-family: Annapurna SIL, Annapurna SIL;
            font-weight: 400;
            font-size: 14px;
            color: #767B93;
            line-height: 16px;
            background: #E6E7EB;
            text-align: center;
            padding: 6px 0;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
          }
        }
      }

      .textarea {
        :deep(.ivu-input-word-count) {
          font-size: 19px;
        }

        &:deep(.ivu-input) {
          font-size: 19px;
          border-radius: 11px;
          padding: 16px;
        }
      }
    }

    .custom-item {

      .custom-label {
        font-family: PingFang HK, PingFang HK;
        font-weight: 500;
        font-size: 21px;
        color: #1E1714;

        .custom-tips {
          font-size: 16px;
          color: #AFAFAF;
        }
      }
    }

    .order-num {
      display: flex;
      flex-direction: column;
      margin-top: 24px;

      .type-label {
        display: flex;
        align-items: center;
        margin-bottom: 0px;
        height: 32px;
        margin-bottom: 16px;
        font-size: 19px;
        font-weight: 600;
      }

      .left {
        .left-content {
          display: flex;
          align-items: center;
        }

        .min-quantity {
          color: @t-text-color;
          font-size: 16px;
          display: block;
          margin-top: 16px;
        }
      }

      .amount-sale {
        font-family: PingFang HK, PingFang HK;
        font-weight: 400;
        font-size: 16px;
        color: #AFAFAF;
        line-height: 22px;
        margin-left: 32px;
      }
    }
  }

  .pay-text {
    display: block;
    margin-top: 32px;
    color: @t-label-color;
    font-size: 16px;
  }

  .buy-tips {
    color: @t-good-special-color;
    font-size: 16px;
  }

  .tips-text {
    padding: 21px 16px;
    background: #FFEAF0;
    border-radius: 11px;
    font-family: PingFang HK, PingFang HK;
    font-weight: 400;
    font-size: 19px;
    color: #FF186B;
    line-height: 22px;
    text-align: justify;
    display: flex;
    align-items: flex-start;

    .text-sub {
      width: calc(100% - 40px);
      margin-left: 10px;
    }
  }

  .buy-help {
    color: #FF186B;
    font-size: 16px;
  }

  .div-line {
    margin: 16px 0;
    height: 1px;
    background: @t-div-line-color;
    border-radius: 2px 2px 2px 2px;
  }

  .ivu-checkbox-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .agree {
    font-family: PingFang HK, PingFang HK;
    font-weight: 400;
    font-size: 19px;
    color: #1E1714;
    line-height: 22px;
  }

  .flow {
    margin-top: 20px;
  }

  .buy {
    display: flex;
    align-items: center;
    margin-top: 19px;
    gap: 24px;

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      width: 140px;
      height: 52px;
      border-radius: 2px 2px 2px 2px;
      opacity: 1;
      color: #FF186B;
      cursor: pointer;
      border: 1px solid #FF186B;
      font-size: 14px;
      font-weight: 500;
    }

    .buy-btn {
      font-family: PingFang HK, PingFang HK;
      font-weight: 500;
      font-size: 24px;
      color: #FFFFFF;
      line-height: 24px;
      background: #FF186B;
      border-color: #FF186B;
      border-radius: 11px;
      // padding: 20px 61px;
      cursor: pointer;
      min-width: 180px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 14px;
      box-sizing: border-box;
    }

    .add-btn {
      background: #FF186B;
      font-family: PingFang HK, PingFang HK;
      font-weight: 500;
      font-size: 24px;
      line-height: 24px;
      color: #FFFFFF;
      border-radius: 8px;
      cursor: pointer;
      min-width: 345px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 0 14px;
      box-sizing: border-box;
    }

    .un-add-btn {
      background: #B2B2B2;
      font-family: PingFang HK, PingFang HK;
      font-weight: 500;
      font-size: 24px;
      line-height: 24px;
      color: #FFFFFF;
      border-radius: 8px;
      min-width: 345px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 0 14px;
      box-sizing: border-box;
      cursor: not-allowed;

      .icon {
        width: 24px;
        height: 24px;
      }

      span {}
    }
  }
}
</style>
